$(function(){




    $.get("json/page.json",function(data){
       // console.log(data);
        $.each(data,function(i,o){
                var $item = $("<div class = \"tabe\">"
                    +"<ul>"
                    +"</ul>"
                    +"</div>");


            if(i==0){
                $item.addClass("active")
            }
                $item.appendTo("#xdTab");
            $.each(o.page1,function(j,k){
              //console.log(k);
                var $itemimg = $("<li>" +
                                "<a href = \"##\">" +
                                "<img src = \""+ k.pxc+"\"/>" +
                                "</a>" +
                                "</li>");

                $itemimg.appendTo("#xdTab>.tabe>ul:eq("+i+")");
            })
        })
        $("#topTab>ul>li").click(function(){
            var $index = $(this).index();
            $("#topTab>ul>li>a").removeClass("active").eq($index).addClass("active");
            $("#xdTab>.tabe").removeClass("active").eq($index).addClass("active");





        });




        //$("#topTab>ul>li").mouseenter(function(){
        //    var $index = $(this).index();
        //    $("#topTab>ul>li>a").removeClass("active").eq($index).addClass("active");
        //})

    });


    var $t = $("#topTab").offset().top;
    $(window).scroll(function(){


        if($t < $(window).scrollTop() ){
            $("#topTab").addClass("active");
        }else{

            $("#topTab").removeClass("active");
        }
    })


});